<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>条件渲染</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
    <div v-show="false">你好</div>
    <div v-show="true">你好</div>
    <h2>当前的n值是:{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <h2 v-show="true">Hello,{{name}}!</h2>

    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else>Vue</div>
</div>
</body>

<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el: '#root',
        data: {
            name: '曾宇杰',
            n: 0
        }
    })

    /**
     *  v-if：
     *      写法：
     *          v-if="表达式"
     *          v-else-if="表达式"
     *          v-else
     *      适用于：切换频率较低的场景
     *      特点：不展示的DOM元素直接再源代码中被移除
     *      注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
     *
     *  v-show：
     *      写法：v-show="表达式"
     *      适用于：切换频率较高的场景
     *      特点：不展示的DOM元素未再源代码中被移除，仅仅是使用样式隐藏掉 display:none
     */
</script>
</html>

